<!--
 * @Author: zyp yangpeng.zhang@fts.aero
 * @Date: 2024-05-29 15:31:11
 * @LastEditors: zyp yangpeng.zhang@fts.aero
 * @LastEditTime: 2024-07-03 15:40:50
 * @FilePath: \vue3-dynamic-module\src\modules\Music\index.vue
 * @Description: 程式描述
-->
<script setup lang="ts">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Pagination, Scrollbar, A11y, EffectCards, EffectCoverflow } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import 'swiper/css/effect-cards';
import 'swiper/css/effect-coverflow';

const modules = [Autoplay, Pagination, Scrollbar, A11y, EffectCards, EffectCoverflow];
const router = useRouter();
const data: any = reactive({
  goods: [
    {
      src: `https://y.gtimg.cn/music/photo_new/T062M000001PEPmq20kj4L.jpg?max_age=0`,
    },
    {
      src: `https://img.phb123.com/uploads/221203/809-221203163KT64.png`,
    },
    {
      src: `https://img.zcool.cn/community/01db1a5e4d311ba801216518b7fd33.jpg?x-oss-process=image/auto-orient,1/resize,m_lfit,w_1280,limit_1/sharpen,100`,
    },
    {
      src: `https://n.sinaimg.cn/sinakd20220915s/96/w2048h2048/20220915/0575-5d991098fbd66f07c4065d885763bdb6.jpg`,
    },
    {
      src: `https://tzg.ylzmjd.com/uploadfile/2020/01/11/20200111134319atO9Ng.jpg`,
    },
    {
      src: `https://gss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D600%2C800/sign=0d33f1434dfbfbeddc0c3e7948c0db0e/32fa828ba61ea8d3aa831478910a304e251f582c.jpg`,
    },
    {
      src: `https://ts1.cn.mm.bing.net/th/id/R-C.703b6c22117920300da2bc2fd36beede?rik=FmRpM2NL%2bo9w%2fw&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20210528ac%2f560%2fw1080h1080%2f20210528%2f7e03-kqpyfha2945903.jpg&ehk=nI%2bRj7Rjk%2fdEcHoj3mZH98xZdS%2fWm1UOr0WEPbXg7Hk%3d&risl=&pid=ImgRaw&r=0`,
    },
  ],
});

const {
  goods,
} = toRefs(data);
// 点击返回
const onClickLeft = () => {
  router.go(-1);
}

</script>

<template>
  <div class="music-page">
    <van-nav-bar title="音乐" left-arrow @click-left="onClickLeft"/>
    <div class="music-wrapper">
      <div class="music-content">
        <div class="music-item" v-for="i in 5">
          <h3>推荐歌单</h3>
          <swiper :slidesPerView="'auto'" :auto-height="true" :space-between="12" :autoplay="{ delay: 5000, disableOnInteraction: false }" :modules="modules" class="super-swiper">
          <swiper-slide v-for="item in goods" :key="item._id" class="super-swiper-slide">
            <div>
              <img v-lazy="item.src" />
            </div>
          </swiper-slide>
        </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.music-page {
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  .music-wrapper{
    flex-grow: 1;
    position: relative;
    .music-content {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: auto;
      .music-item {
        margin: 20px;
        h3 {
          font-size: 36px;
          margin-top: 0;
        }
      }
    }
  }
  .super-swiper {
    width: 100%;
    .super-swiper-slide {
      width: 30%;
      img {
        width: 100%;
      }
    }
  }
}
</style>
